<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/> <!-- 设置页面的基础路径，页面所有资源引入和页面跳转都基于bathPath -->

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,exam-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-table/bootstrap-table.min.css" />
    <title>测试项目列表</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 系统管理 <span class="c-gray en"></span>
    测试项目管理 <span class="c-gray en"></span> 测试项目列表
</nav>

<div class="page-container">
	<span id="toolbar" class="l">
        <shiro:hasPermission name="exam:batchdel">
			<a href="javascript:;" onclick="exam_batchdel()" class="btn btn-danger radius">
				<i class="Hui-iconfont">&#xe6e2;</i>
				 批量删除
			</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="exam:insert">
			<a href="javascript:;" onclick="exam_add()" class="btn btn-primary radius">
				<i class="Hui-iconfont">&#xe600;</i>
				添加测试项目
			</a>
        </shiro:hasPermission>
	</span>
    <!-- 把需要呈现的表格放进去 -->
    <table id="dataTable"></table>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
    //文档加载完毕后执行匿名函数(以下代码使用bootstrap-table来呈现分页数据)
    $(function(){
        //1.初始化bootstrap-table
        $("#dataTable").bootstrapTable({
            url:"exam/list.do",
            method:"get",
            /*
            res: 后台分页对象PageInfo返回对应的json对象
            res.list : 结果集
            res.total : 总记录数
            */
            responseHandler:function(res){
                var data = {rows:res.list, total:res.total};
                return data;
            },
            //设置ajax异步请求参数
            queryParams:function(params){
                //console.log(params);  //打印调试
                // 重新组装需要返回的数据，以json格式返回
                var paramsData = {keywords:params.search,
                    pageSize:params.limit,
                    pageNum:params.offset/params.limit+1}
                return paramsData;
            },
            pagination:true,  //是否显示分页
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true,//是否显示搜索框
            pageNumber: 1,//默认的页面为第一页
            pageSize: 10,//默认的每页数据条数为10条
            pageList:[5,10,25,50],//每页能显示的条数
            sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right', //底部分页条
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            showColumns: true, //是否显示所有的列
            showRefresh: true, //是否显示刷新按钮
            columns: [ //表格显示数据对应的表头设置，
                { checkbox: true},//是否显示前台的复选框（多选）
                {field: 'examId',title: '测试项目编号'},
                {field: 'examName',title: '测试项目名称'},
                {field: 'examTypeName',title: '测试项目类型名称'},
                {field: 'price',title: '测试项目价格'},
                {field: 'cost',title: '测试项目成本'},
                {
                    field:'examId',
                    title:'操作',
                    align:'center',
                    formatter:operationFormatter
                } //操作列的设置（详细，删除，修改）
            ]
        });
    });

    /* 格式化函数：用于返回html字符串（会自动渲染出效果）
     * value: 当前列的值
     * row:当前行的整个对象
     * index: 索引的位置
     * field: 字段名
     */
    function operationFormatter(value, row, index, field){

        // 定义一个删除按钮
        var html = "<shiro:hasPermission name='exam:delete'>";
        html += "<span onclick='exam_del(" + value + ")' style='cursor:pointer; color:red;' class='glyphicon glyphicon-trash'></span>";
        html += "&nbsp;&nbsp;&nbsp;&nbsp;";
        html += "</shiro:hasPermission>";

        // 定义一个更新按钮
        html += "<shiro:hasPermission name='exam:update'>";
        html += "<span onclick='exam_update(" + value + ")' style='cursor:pointer; color:blue;' class='glyphicon glyphicon-pencil'></span>";
        html += "</shiro:hasPermission>";
        return html;
    }
</script>

<script type="text/javascript">

    /*测试项目-增加*/
    function exam_add(){
        //在这里面输入任何合法的js语句
        layer.open({
            type: 2, //Page层类型
            area: ['800px', '500px'],
            title: '新增测试项目',
            shade: 0.6, //遮罩透明度
            maxmin: true,//允许全屏最小化
            anim: 3, //0-6的动画形式，-1不开启
            content: 'exam/edit.do'
        });
    }

    /*测试项目-更新*/
    function exam_update(examId){
        layer.open({
            type:2,
            area: ['800px', '500px'],
            title:'更新测试项目',
            shade:'0.6',
            maxmin:true,
            anim:3,
            content:'exam/edit.do?examId='+examId  //这里把需要更新的examId带过去
        });
    }

    /*测试项目-删除*/
    function exam_del(examId){
        layer.confirm("老板，您确定要删除此条数据？",{icon:3},function(){
            $.get("exam/delete.do?",{examId:examId},function(respData){
                console.log(respData);
                //删除完毕之后的提示，这里在显示的时候使用的是layer.layui.com的技术
                layer.msg(respData.msg,{icon:respData.code,time:2000},function(){
                    if(respData.code == 1){
                        //删除成功后刷新数据
                        refreshTable();
                    }
                });
            });
        });
    }

    /* 测试项目-批量删除 */
    function exam_batchdel(){
        layer.confirm("老板，您确定要删除选中的数据？",{icon:3},function(){
            // 1.以json格式获取到所有被选中的数据
            var selectedData = $("#dataTable").bootstrapTable('getSelections');
            console.log(selectedData);
            // 2.将所有被选中数据的examId提取出来组成一个数组
            var examIds = new Array();
            for(var i = 0; i < selectedData.length; i++){
                examIds[i] = selectedData[i].examId;
            }
            // 3.将被选中的examIds数组通过ajax传给后台（examIds转成String之后传给后台）
            $.get("exam/batchdel.do",{examIds:examIds.toString()},function(respData){
                console.log(respData);
                //删除完毕之后的提示，这里在显示的时候使用的是layer.layui.com的技术
                layer.msg(respData.msg,{icon:respData.code,time:2000},function(){
                    if(respData.code == 1){
                        //删除成功后刷新数据
                        refreshTable();
                    }
                });
            });
        });
    }

    /* 刷新bootstrap-table的函数 */
    function refreshTable(){
        $("#dataTable").bootstrapTable("refresh");
    }

</script>
</body>
</html>